
import React from "react"
import { timeAgo } from '@/util/index'
import useStore from "@/context/useStore"
import styles from "./homelist.less"
import { observer } from "mobx-react-lite"
import { useHistory } from "umi"

const Homelist: React.FC = () => {
    let { Home } = useStore()
    const history = useHistory()
    const godetail = (id: string) => {
        // history.push('/article/detail'+id)
        history.push(`/article/detail/${id}`, id)
    }


    return (
        <div className={styles.homepage_list} key={JSON.stringify(Home.articleRecommend)}>
            {
                Home.articleRecommend.map((item, index) => {
                    return <dl key={index} onClick={() => { godetail(item.id) }}>
                        <dt>
                            <img src={item.cover} alt="" />
                        </dt>
                        <dd>
                            <p className={styles.itemtitle}>{item.title}</p>
                            <p className={styles.itemtext}>{item.summary}</p>
                            <p className={styles.data}>
                                <span>{item.tags.map(value => value.label).join(" · ")} · </span>
                                <span>{item.views}次阅读 · </span>
                                <span>{timeAgo(+ new Date(item.createAt))}前</span>
                            </p>
                        </dd>
                    </dl>
                })
            }
        </div>
    )
}
export default observer(Homelist);
